<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>年会抽奖</title>
    <style>
        .wrapper {
            width: 840px;
            height: 420px;
            background: url(../images/bg01.jpg) no-repeat center / cover;
            padding: 100px 250px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <strong>传智教育年会抽奖</strong>
        <h1>一等奖：<span id="one">???</span></h1>
        <h3>二等奖：<span id="two">???</span></h3>
        <h5>三等奖：<span id="three">???</span></h5>
    </div>
    <script>
        // 0 获取dom元素
        const one = document.querySelector('#one');
        const two = document.querySelector('#two');
        const three = document.querySelector('#three');

        // 1 定义 名单 用来抽奖
        const arr = ['刘德华', '张学友', '郭富城', '黎明', '坤坤', '小黑子'];

        // 2 随机获取数组中的元素
        // 抽取一等奖
        const index1 = getRandom(0, arr.length - 1);
        const name1 = arr[index1];
        one.innerText = name1;

        // 删除掉已经获奖的名单
        // 数组删除元素 pop shift  splice(要删除的元素的下标,删除几个) 删除
        arr.splice(index1, 1);

        // 抽取2二等奖
        const index2 = getRandom(0, arr.length - 1);
        const name2 = arr[index2];
        two.innerText = name2;

        // 抽取 三等奖
        arr.splice(index2, 1);
        const index3 = getRandom(0, arr.length - 1);
        const name3 = arr[index3];
        three.innerText = name3;

        // 根据传入最小值和最大值返回随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        };
    </script>
</body>

</html>